<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<!--
    106.12.215.182:8080/hello-0.0.1-SNAPSHOT/

     -->
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body { font-size: 18px; line-height: 120%; text-align: center; color:#333; padding: 20px;}
        a { color: #333; text-decoration: none;}
        a:hover { text-decoration: underline;}
        * { margin: 0; padding: 0; border: none;}
        .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden}
        .clearfix { *height:1%;}
        #list { margin: 0 auto; text-align: left; width: 800px;}
        .box { border-top: 1px solid #eee; position: relative;  width: 800px; padding: 20px 0}
        .box:hover .close { display: block;}
        .close { display: none; top:0px; right: 0px; width: 28px; height: 28px; border: 1px solid #eee; position: absolute; background: #f2f4f7; line-height: 27px; text-align: center;}
        .close:hover { background: #c8d2e2; text-decoration: none;}
        .head { float: left; width: 70px; height: 70px; margin-right: 20px;}
        .content { float: left; width: 650px;}
        .main { margin-bottom: 10px;}
        .txt { margin-bottom: 10px;}
        .user { color: #369; }
        .pic { margin-right: 5px; width: 200px; border: 1px solid #eee;}
        .info { height: 20px; line-height: 19px; font-size: 12px; margin: 0 0 10px 0;}
        .info .time { color: #ccc; float: left; height: 20px; padding-left: 20px;}
        .info .praise {font-size:15px;color: #369; float: right; height: 20px; padding-left: 18px;}
        .info .praise:hover { text-decoration: underline; no-repeat left top;}
        .praises-total { margin-top:30px;font-size: 15px;margin: 0 0 10px 0; height: 20px;padding: 5px 0 5px 25px; line-height: 19px;}
        .comment-list{font-size: 15px;height:120%;}
        .comment-box { padding: 10px 0; border-top: 1px solid #eee;}
        .comment-box:hover { background: rgb(247, 247, 247);}
        .comment-box .myhead { float: left; width: 30px; height: 30px; margin-right: 10px;}
        .comment-box .comment-content { float: left; width: 560px; }
        .comment-box .comment-content .comment-time { color: #ccc; margin-top: 3px; line-height: 16px; position: relative;}
        .comment-box .comment-content .comment-praise { display: none; color: #369; padding-left: 21px; height: 20px; position: absolute; bottom: 0px; right: 52px;}
        .comment-box .comment-content .comment-operate { display: none; color: #369; height: 20px;  position: absolute; bottom: 0px; right: 10px;}
        .comment-box .comment-content:hover .comment-praise { display: inline-block;}
        .comment-box .comment-content:hover .comment-operate { display: inline-block;}
        .text-box .comment { border: 1px solid #eee; display: block; height: 15px; width:638px; padding: 5px; resize: none; color: #ccc}
        .text-box .btn { font-size: 12px; font-weight: bold; display: none; float: right; width: 65px; height: 25px; border: 1px solid #0C528D; color: #fff; background: #4679AC;}
        .text-box .btn-off { border: 1px solid #ccc; color: #ccc; background: #F7F7F7;}
        .text-box .word{ display: none; float: right; margin: 7px 10px 0 0; color: #666;}
        .text-box-on .comment{ height: 50px; color: #333;}
        .text-box-on .btn{ display: inline;}
        .text-box-on .word{ display: inline;}
    </style>
    <script src="http://106.12.215.182:8080/hello-0.0.1-SNAPSHOT/layui/layui.js"></script>
    <script type="text/javascript" src="http://106.12.215.182:8080/hello-0.0.1-SNAPSHOT/jquery/jquery-1.8.3.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="http://106.12.215.182:8080/hello-0.0.1-SNAPSHOT/layui/css/layui.css" media="all">
</head>
<body>

    <div id="list">
        <div class="box clearfix" th:each="luntan:${luntanList}">
            <a class="close" href="javascript:;">×</a>
            <img class="head" src="http://106.12.215.182:8080/hello-0.0.1-SNAPSHOT/images/02.jpg" alt=""/>
            <div class="content">
                <div class="main">
                    <p class="txt">
                        <span class="user">userName</span><span>：</span><span th:text = "${luntan.content}"></span>
                    </p>
                        <!--<img class="pic" src="images/img1.jpg" alt=""/>-->
                </div>
                <div class="info clearfix">
                    <span class="time" th:text="${luntan.ptime}"></span>
                    <a class="praise" href="javascript:;" th:text="${luntan.zanguo==0}?'赞':'取消赞'"></a>
                </div>
                <div class="praises-total" th:total="${luntan.zan}" style="display: block;"><span th:text="${luntan.zan}"></span>个人觉得很赞</div>
                <div class="comment-list" th:each="response:${ml[luntan.floor]}">
                    <div class="comment-box clearfix" user="self">
                        <img class="myhead" src="images/my.jpg" alt=""/>
                        <div class="comment-content">
                            <p class="comment-text">
                                <span class="user" th:text = "${response.userid1}"></span>
                                <span>回复</span>
                                <span th:text = "${response.userid2}"></span><span th:text="${response.content}"></span>
                            </p>
                            <p class="comment-time">
                                2014-02-19 14:36
                                <a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1 赞</a>
                                <a href="javascript:;" class="comment-operate">删除</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="text-box">
                    <textarea class="comment" autocomplete="off">评论…</textarea>
                    <button class="btn ">回 复</button>
                    <span class="word"><span class="length">0</span>/140</span>
                </div>
            </div>
        </div>

    </div>
    <div id="page" style = "width:500px;height:300px;margin:0 auto;"></div>
    <script type="text/javascript" src="http://106.12.215.182:8080/hello-0.0.1-SNAPSHOT/js/luntan.js"></script>
    <script>

        /*<![CDATA[*/

        var curr = [[${curr}]];

        /*]]>*/

        var limitCount=10;
        layui.use('laypage', function(){
            var laypage = layui.laypage;
            laypage.render({
                elem: 'page'
                ,limit:limitCount
                ,curr:curr
                ,count:70
                ,jump:function(obj,first){
                    if(!first) {
                        //第一次不执行,一定要记住,这个必须有,要不然就是死循环
                        pageQuery(obj.curr,limitCount);

                    }
                }

            });
        });
        var tid = [[${#httpServletRequest.getParameter('tid')}]];
        function pageQuery(page,limitCount) {
            var datax={};
            curr=page;
            console.log(page);
            datax.curr=page;
            datax.limitCount = limitCount;
            datax.tid=tid;
            var data = JSON.stringify(datax);
            $.ajax({
                url: "http://106.12.215.182:8080/hello-0.0.1-SNAPSHOT/luntan/shift",
                type: "post",
                contentType: "application/json",
                data:data,
                async: false,
                success: function (url) {
                    console.log(curr);
                    window.location.href=url;

                },
                error: function () {
                    console.log("未知错误");
                }
            });
        }





    </script>
</body>
</html>